<!--  -->
<template>
    <div v-show="isShow">
        <el-dialog :title="dialogTitle" :visible.sync="editVisible" width="60%">
            <vxe-table
                border
                resizable
                :auto-resize="true"
                keep-source
                highlight-hover-row
                highlight-hover-column
                ref="xTree1"
                row-id="id"
                :radio-config="{labelField: 'name', trigger: 'row',highlight: true}"
                :data="tableData"
                @radio-change="currentChangeEvent"
            >
                <vxe-table-column type="radio" title width="60"></vxe-table-column>
                <vxe-table-column type="seq" width="60"></vxe-table-column>
                <vxe-table-column field="bankAccount" title="账号代码"></vxe-table-column>
                <vxe-table-column field="description" title="账户名称"></vxe-table-column>
                <vxe-table-column field="bankName" title="银行全称"></vxe-table-column>
                <vxe-table-column field="bankNameShort" title="银行简称"></vxe-table-column>
                <vxe-table-column field="curreny" title="币别"></vxe-table-column>
                <vxe-table-column field="eBank" title="网银">
                    <template slot-scope="scope">{{scope.row.eBank == 1?'Y':'N'}}</template>
                </vxe-table-column>
            </vxe-table>
            <vxe-pager
                background
                auto-hidden
                size="small"
                :current-page="pagination.pageIndex"
                :page-size="pagination.pageSize"
                :total="pagination.pageTotal"
                :layouts="['PrevPage', 'JumpNumber','NextPage', 'Total']"
                @page-change="handlePageChange"
            ></vxe-pager>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main.js';
var _ = require('lodash');
export default {
    props: {
        isShow: false,
        dialogTitle: ''
    },
    data() {
        return {
            editVisible: false,
            currentRow: '',
            //树数据
            data: [],
            treeConfig: {
                children: 'child',
                expandAll: true
            },
            //列表数据
            tableData: [],
            pagination: {
                pageIndex: 1,
                pageSize: 10,
                pageTotal: 0
            },
            query: {
                bankAccount: '', //账号名称
                bankName: '', //银行全称
                bankNameShort: '', //银行简称
                curreny: '', //币别
                description: '', //账户名称
                eBank: '', //是否开通网银：0没有开通，1开通
                subCode: '' //科目
            }
        };
    },
    methods: {
        handlePageChange({ currentPage, pageSize }) {
            this.pagination.pageIndex = currentPage;
            this.pagination.pageSize = pageSize;
            this.getData();
        },
        //点击单选方法
        currentChangeEvent({ row }) {
            this.currentRow = row;
            console.log('currentChangeEvent', row);
        },
        getData() {
            let params = {
                pageNo: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize,
                record: this.query
            };

            appMain
                .accBankFindAllPage(params)
                .then(res => {
                    if (res.data.code === 20000) {
                        //TODO 测试环境使用
                        //设置延迟执行
                        this.tableData = res.data.data.list;
                        this.pagination.pageSize = res.data.data.pageSize;
                        this.pagination.pageIndex = res.data.data.pageNum;
                        this.pagination.pageTotal = res.data.data.total;

                        console.log('getData tableData', this.tableData);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        close() {
            this.$emit('close', {
                showDialog: false
            });
        },
        // 从弹窗返回主页面的数据
        saveEdit() {
            //let item = this.tableDataIndex === '' ? {} : this.tableData[this.tableDataIndex];
            this.$emit('edit', { backData: this.currentRow, showDialog: false });
        }
    },
    watch: {
        isShow: function(newVal, oldVal) {
            //console.log(newVal, 'newVal');
            if (newVal == true) {
                this.editVisible = true;
                this.getData();
            } else {
                //清空选中
                this.editVisible = false;
                this.$refs.xTree1.clearRadioRow();
                this.currentRow = {};
                this.tableData = [];
            }
        },
        editVisible: function(newVal) {
            this.$emit('close', {
                showDialog: newVal
            });
        },
        tableData: {
            //展开行
            handler: function() {
                for (const key in this.tableData) {
                    this.$refs.xTree1.setTreeExpand(this.tableData[key], true);
                }
            }
        }
    },
    computed: {},
    created() {}
};
</script>

<style lang="css" scoped>
.el-dialog__body {
    padding: 0 20px 30px;
}
.handle-input {
    width: 120px;
    display: inline-block;
}
.handle-select {
    width: 120px;
}
.tree-box {
    border: 1px solid #ddd;
    margin-top: 20px;
    min-height: 300px;
}
.flex-left {
    width: 200px;
    border-right: 1px solid #ddd;
}
.flex-right {
    flex: 1;
}
.el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
}
.el-tree > .el-tree-node {
    height: 300px;
    min-width: 100%;
    display: inline-block;
}
</style>